<template>
	<view class="container">
		<div class="myUnit">
			<uni-section class="mySection" title="电子签名" type="line"></uni-section>
			<div class="myText signDiv">
				<div style="display: flex;align-items: center;">
					<div><span class="mustTag">*</span>当前签名：</div>
					<div v-if="imgUrl">
						<image :src="imgUrl" style="width: 150px;height: 30px;" mode="aspectFit">
						</image>
					</div>
					<div v-else class="signBtn" @click="signShow()">点击签名</div>
					<div v-if="imgUrl" class="signBtn" style="position: absolute;right: 20px;" @click="deleteSign()">删除
					</div>
				</div>
			</div>
		</div>
		<jp-signature-popup ref="signature1" popup @change='uploadImg' />
		<div class="myBtn">
			<u-button type='primary' text="提交" @click="confirm()" throttleTime='1000'></u-button>
		</div>
	</view>
</template>

<script>
	import {
		getSign,
		okSign
	} from "@/api/system/user"
	import config from '@/config'
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				userId: '',
				imgUrl: "",
			}
		},
		mounted() {
			this.load()
		},
		methods: {
			load() {
				this.userId = uni.getStorageSync('storage_data').vuex_userId
				let req = {
					userId: this.userId
				}
				getSign(req).then(res => {
					this.imgUrl = res.data.signature
				})
			},
			confirm() {
				if (!this.imgUrl) {
					this.$toast('请先完成签名')
					return
				}
				let req = {
					userId: this.userId,
					signature: this.imgUrl
				}
				okSign(req).then(res => {
					this.$toast('签名成功')
					setTimeout(() => {
						uni.navigateBack({
						})
					}, 1000)
				})
			},
			signShow() {
				this.$refs.signature1.toPop()
			},
			deleteSign() {
				this.imgUrl = ''
			},
			uploadImg(e) {
				uni.showLoading()
				let vm = this
				uni.uploadFile({
					url: baseUrl + '/common/uploadFile/common',
					filePath: e,
					name: 'file',
					success: (res) => {
						if (res.statusCode == 200) {
							let data = JSON.parse(res.data).data
							this.imgUrl = data.url
						} else {
							vm.$toast('上传失败')
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.signDiv {
		padding-top: 20px;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}

	.signBtn {
		color: $u-primary !important;
	}

	.mustTag {
		color: $u-error;
	}
</style>